<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API接口测试 - 凯泽利项目管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .main-content {
            padding: 30px;
        }

        .auth-section {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
            border-left: 4px solid #667eea;
        }

        .auth-section h3 {
            color: #333;
            margin-bottom: 15px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #555;
        }

        .form-group input {
            width: 100%;
            padding: 12px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        .form-group input:focus {
            outline: none;
            border-color: #667eea;
        }

        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: transform 0.2s;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        .btn-success {
            background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
        }

        .btn-danger {
            background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
        }

        .btn-warning {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .btn-info {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .api-section {
            margin-bottom: 30px;
            border: 1px solid #e1e5e9;
            border-radius: 10px;
            overflow: hidden;
        }

        .api-header {
            background: #f8f9fa;
            padding: 20px;
            border-bottom: 1px solid #e1e5e9;
        }

        .api-header h3 {
            color: #333;
            margin-bottom: 10px;
        }

        .api-header p {
            color: #666;
            font-size: 14px;
        }

        .api-content {
            padding: 20px;
        }

        .form-row {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .form-row .form-group {
            flex: 1;
            min-width: 200px;
        }

        .response-area {
            background: #f8f9fa;
            border: 1px solid #e1e5e9;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            min-height: 100px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        
        .form-tips {
            background: #e3f2fd;
            border: 1px solid #2196f3;
            border-radius: 8px;
            padding: 15px;
            margin: 15px 0;
            font-size: 14px;
        }
        
        .form-tips ul {
            margin: 8px 0;
            padding-left: 20px;
        }
        
        .form-tips li {
            margin: 5px 0;
        }

        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .status-success {
            background-color: #28a745;
        }

        .status-error {
            background-color: #dc3545;
        }

        .status-warning {
            background-color: #ffc107;
        }

        .token-display {
            background: #e8f4fd;
            border: 1px solid #bee5eb;
            border-radius: 8px;
            padding: 10px;
            margin-top: 10px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            word-break: break-all;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .card {
            background: white;
            border: 1px solid #e1e5e9;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .card h4 {
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #667eea;
        }

        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }

        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 8px;
            border-left: 4px solid;
        }

        .alert-success {
            background-color: #d4edda;
            border-color: #28a745;
            color: #155724;
        }

        .alert-error {
            background-color: #f8d7da;
            border-color: #dc3545;
            color: #721c24;
        }

        .alert-info {
            background-color: #d1ecf1;
            border-color: #17a2b8;
            color: #0c5460;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚀 API接口测试平台</h1>
            <p>凯泽利项目管理系统 - Others功能CRUD测试</p>
        </div>

        <div class="main-content">
            <!-- 认证区域 -->
            <div class="auth-section">
                <h3>🔐 用户认证</h3>
                <div class="form-row">
                    <div class="form-group">
                        <label for="username">用户名:</label>
                        <input type="text" id="username" placeholder="请输入用户名" value="admin">
                    </div>
                    <div class="form-group">
                        <label for="password">密码:</label>
                        <input type="password" id="password" placeholder="请输入密码" value="123456">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="captchaCode">验证码:</label>
                        <input type="text" id="captchaCode" placeholder="请输入验证码" maxlength="4">
                    </div>
                    <div class="form-group">
                        <label>&nbsp;</label>
                        <div style="display: flex; align-items: center; gap: 10px;">
                            <div id="captchaImage" style="width: 120px; height: 40px; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; background: #f5f5f5; display: flex; align-items: center; justify-content: center; color: #999; font-size: 12px;" onclick="refreshCaptcha()" title="点击刷新验证码">
                                加载中...
                            </div>
                            <button type="button" class="btn" onclick="refreshCaptcha()" style="margin: 0;">刷新</button>
                        </div>
                    </div>
                </div>
                <button class="btn" onclick="login()">登录获取Token</button>
                <div id="tokenDisplay" class="token-display" style="display: none;"></div>
            </div>

            <!-- 公司管理 -->
            <div class="api-section">
                <div class="api-header">
                    <h3>🏢 公司管理 (CompanyController)</h3>
                    <p>公司信息CRUD操作 - 支持新增、查询、更新、删除</p>
                </div>
                <div class="api-content">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="companyName">公司名称:</label>
                            <input type="text" id="companyName" placeholder="请输入公司名称" value="测试公司">
                        </div>
                        <div class="form-group">
                            <label for="companyCode">公司编码:</label>
                            <input type="text" id="companyCode" placeholder="请输入公司编码" value="TEST001">
                        </div>
                        <div class="form-group">
                            <label for="companyStatus">状态:</label>
                            <input type="text" id="companyStatus" placeholder="请输入状态" value="active">
                        </div>
                    </div>
                    <div class="form-row">
                        <button class="btn btn-success" onclick="createCompany()">新增公司</button>
                        <button class="btn btn-info" onclick="getCompanyById()">根据ID查询</button>
                        <button class="btn btn-info" onclick="getCompanyByCode()">根据编码查询</button>
                        <button class="btn btn-warning" onclick="updateCompany()">更新公司</button>
                        <button class="btn btn-danger" onclick="deleteCompany()">删除公司</button>
                        <button class="btn" onclick="getAllCompanies()">查询所有公司</button>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="companyId">公司ID:</label>
                            <input type="number" id="companyId" placeholder="请输入公司ID" value="1">
                        </div>
                        <div class="form-group">
                            <label for="companyQueryCode">查询编码:</label>
                            <input type="text" id="companyQueryCode" placeholder="请输入查询编码" value="TEST001">
                        </div>
                    </div>
                    <div id="companyResponse" class="response-area">点击按钮测试公司管理接口...</div>
                </div>
            </div>

            <!-- 客户管理 -->
            <div class="api-section">
                <div class="api-header">
                    <h3>👥 客户管理 (CustomerController)</h3>
                    <p>客户信息CRUD操作 - 支持新增、查询、更新、删除</p>
                </div>
                <div class="api-content">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="customerName">客户名称:</label>
                            <input type="text" id="customerName" placeholder="请输入客户名称" value="测试客户">
                        </div>
                        <div class="form-group">
                            <label for="customerCode">客户编码:</label>
                            <input type="text" id="customerCode" placeholder="请输入客户编码" value="CUST001">
                        </div>
                        <div class="form-group">
                            <label for="customerStatus">状态:</label>
                            <input type="text" id="customerStatus" placeholder="请输入状态" value="active">
                        </div>
                    </div>
                    <div class="form-row">
                        <button class="btn btn-success" onclick="createCustomer()">新增客户</button>
                        <button class="btn btn-info" onclick="getCustomerById()">根据ID查询</button>
                        <button class="btn btn-info" onclick="getCustomerByCode()">根据编码查询</button>
                        <button class="btn btn-warning" onclick="updateCustomer()">更新客户</button>
                        <button class="btn btn-danger" onclick="deleteCustomer()">删除客户</button>
                        <button class="btn" onclick="getAllCustomers()">查询所有客户</button>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="customerId">客户ID:</label>
                            <input type="number" id="customerId" placeholder="请输入客户ID" value="1">
                        </div>
                        <div class="form-group">
                            <label for="customerQueryCode">查询编码:</label>
                            <input type="text" id="customerQueryCode" placeholder="请输入查询编码" value="CUST001">
                        </div>
                    </div>
                    <div id="customerResponse" class="response-area">点击按钮测试客户管理接口...</div>
                </div>
            </div>

            <!-- 项目管理 -->
            <div class="api-section">
                <div class="api-header">
                    <h3>📋 项目管理 (ProjectBasicInfoController)</h3>
                    <p>项目基础信息CRUD操作 - 支持新增、查询、更新、删除</p>
                </div>
                <div class="api-content">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="projectCode">项目编号:</label>
                            <input type="text" id="projectCode" placeholder="请输入项目编号" value="PROJ001">
                        </div>
                        <div class="form-group">
                            <label for="projectName">项目名称:</label>
                            <input type="text" id="projectName" placeholder="请输入项目名称" value="测试项目">
                        </div>
                        <div class="form-group">
                            <label for="projectBudget">项目预算:</label>
                            <input type="number" id="projectBudget" placeholder="请输入项目预算" value="100000">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="estimatedCost">预计成本:</label>
                            <input type="number" id="estimatedCost" placeholder="请输入预计成本" value="80000">
                        </div>
                        <div class="form-group">
                            <label for="projectStatus">项目状态:</label>
                            <input type="text" id="projectStatus" placeholder="请输入项目状态" value="in_progress">
                        </div>
                        <div class="form-group">
                            <label for="customerIdForProject">客户ID:</label>
                            <input type="number" id="customerIdForProject" placeholder="请输入客户ID" value="1">
                        </div>
                    </div>
                    <div class="form-row">
                        <button class="btn btn-success" onclick="createProject()">新增项目</button>
                        <button class="btn btn-info" onclick="getProjectById()">根据ID查询</button>
                        <button class="btn btn-info" onclick="getProjectByCode()">根据编号查询</button>
                        <button class="btn btn-warning" onclick="updateProject()">更新项目</button>
                        <button class="btn btn-danger" onclick="deleteProject()">删除项目</button>
                        <button class="btn" onclick="getAllProjects()">查询所有项目</button>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="projectId">项目ID:</label>
                            <input type="number" id="projectId" placeholder="请输入项目ID" value="1">
                        </div>
                        <div class="form-group">
                            <label for="projectQueryCode">查询编号:</label>
                            <input type="text" id="projectQueryCode" placeholder="请输入查询编号" value="PROJ001">
                        </div>
                    </div>
                    <div id="projectResponse" class="response-area">点击按钮测试项目管理接口...</div>
                </div>
            </div>

            <!-- 合同人员管理 -->
            <div class="api-section">
                <div class="api-header">
                    <h3>👨‍💼 合同人员管理 (ContractPersonnelController)</h3>
                    <p>合同人员信息CRUD操作 - 支持新增、查询、更新、删除</p>
                </div>
                <div class="api-content">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="personnelName">人员姓名:</label>
                            <input type="text" id="personnelName" placeholder="请输入人员姓名" value="张三">
                        </div>
                        <div class="form-group">
                            <label for="personnelType">人员类型:</label>
                            <select id="personnelType">
                                <option value="">请选择人员类型</option>
                                <option value="company_employee">公司正式员工</option>
                                <option value="outsourcing">外包人员</option>
                                <option value="formal">正式合作人员</option>
                                <option value="temporary">临时人员</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="jobTitle">职位:</label>
                            <input type="text" id="jobTitle" placeholder="请输入职位" value="高级开发工程师">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="contractIdForPersonnel">合同ID:</label>
                            <input type="number" id="contractIdForPersonnel" placeholder="请输入合同ID（先查询项目合同获取有效ID）" value="">
                        </div>
                        <div class="form-group">
                            <label for="personnelPrice">价格:</label>
                            <input type="number" id="personnelPrice" placeholder="请输入价格" value="1000">
                        </div>
                    </div>
                    <div class="form-row">
                        <button class="btn btn-success" onclick="createContractPersonnel()">新增合同人员</button>
                        <button class="btn btn-info" onclick="getContractPersonnelById()">根据ID查询</button>
                        <button class="btn btn-warning" onclick="updateContractPersonnel()">更新合同人员</button>
                        <button class="btn btn-danger" onclick="deleteContractPersonnel()">删除合同人员</button>
                        <button class="btn" onclick="getAllContractPersonnel()">查询所有合同人员</button>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="contractPersonnelId">合同人员ID:</label>
                            <input type="number" id="contractPersonnelId" placeholder="请输入合同人员ID" value="1">
                        </div>
                    </div>
                    <div class="form-tips">
                        <p><strong>💡 使用提示：</strong></p>
                        <ul>
                            <li>合同ID：必须先查询项目合同，获取有效的合同ID</li>
                            <li>人员类型：从下拉列表中选择，不能自定义</li>
                            <li>姓名：必填字段</li>
                            <li>其他字段：可选，留空表示不更新该字段</li>
                        </ul>
                    </div>
                    <div id="contractPersonnelResponse" class="response-area">点击按钮测试合同人员管理接口...</div>
                </div>
            </div>

            <!-- 项目合同管理 -->
            <div class="api-section">
                <div class="api-header">
                    <h3>📄 项目合同管理 (ProjectContractController)</h3>
                    <p>项目合同信息CRUD操作 - 支持新增、查询、更新、删除</p>
                </div>
                <div class="api-content">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="contractNumber">合同编号:</label>
                            <input type="text" id="contractNumber" placeholder="请输入合同编号" value="CONTRACT001">
                        </div>
                        <div class="form-group">
                            <label for="contractAmount">合同金额:</label>
                            <input type="number" id="contractAmount" placeholder="请输入合同金额" value="500000">
                        </div>
                        <div class="form-group">
                            <label for="projectIdForContract">项目ID:</label>
                            <input type="number" id="projectIdForContract" placeholder="请输入项目ID" value="1">
                        </div>
                    </div>
                    <div class="form-row">
                        <button class="btn btn-success" onclick="createProjectContract()">新增项目合同</button>
                        <button class="btn btn-info" onclick="getProjectContractById()">根据ID查询</button>
                        <button class="btn btn-warning" onclick="updateProjectContract()">更新项目合同</button>
                        <button class="btn btn-danger" onclick="deleteProjectContract()">删除项目合同</button>
                        <button class="btn" onclick="getAllProjectContracts()">查询所有项目合同</button>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="projectContractId">项目合同ID:</label>
                            <input type="number" id="projectContractId" placeholder="请输入项目合同ID" value="1">
                        </div>
                    </div>
                    <div id="projectContractResponse" class="response-area">点击按钮测试项目合同管理接口...</div>
                </div>
            </div>

            <!-- 加载指示器 -->
            <div id="loading" class="loading">
                <div class="spinner"></div>
                <p>正在处理请求...</p>
            </div>
        </div>
    </div>

    <script>
        let authToken = '';
        let captchaId = '';

        // 显示加载状态
        function showLoading() {
            document.getElementById('loading').style.display = 'block';
        }

        // 隐藏加载状态
        function hideLoading() {
            document.getElementById('loading').style.display = 'none';
        }

        // 显示响应结果
        function showResponse(elementId, data, isError = false) {
            const element = document.getElementById(elementId);
            const timestamp = new Date().toLocaleString();
            const status = isError ? 'error' : 'success';
            const statusText = isError ? '❌ 请求失败' : '✅ 请求成功';
            
            element.innerHTML = `[${timestamp}] ${statusText}\n${JSON.stringify(data, null, 2)}`;
            element.style.backgroundColor = isError ? '#f8d7da' : '#d4edda';
        }

        // 获取验证码
        async function refreshCaptcha() {
            const captchaImageEl = document.getElementById('captchaImage');
            captchaImageEl.innerHTML = '加载中...';
            
            try {
                const response = await fetch('/api/captcha/generate');
                const result = await response.json();
                
                if (result.code === 200) {
                    captchaId = result.data.captchaId;
                    // 使用与login.html相同的方式显示图片
                    captchaImageEl.innerHTML = `<img src="${result.data.captchaImage}" alt="验证码" style="width: 100%; height: 100%; border-radius: 6px;">`;
                    document.getElementById('captchaCode').value = '';
                } else {
                    captchaImageEl.innerHTML = '加载失败';
                    alert('获取验证码失败：' + result.message);
                }
            } catch (error) {
                captchaImageEl.innerHTML = '加载失败';
                alert('获取验证码失败：' + error.message);
            }
        }

        // 通用API请求函数
        async function apiRequest(url, method = 'GET', data = null) {
            showLoading();
            try {
                const options = {
                    method: method,
                    headers: {
                        'Content-Type': 'application/json',
                    }
                };

                if (authToken) {
                    options.headers['Authorization'] = `Bearer ${authToken}`;
                }

                if (data) {
                    options.body = JSON.stringify(data);
                }

                const response = await fetch(url, options);
                const result = await response.json();
                
                hideLoading();
                return { success: response.ok, data: result, status: response.status };
            } catch (error) {
                hideLoading();
                return { success: false, data: { error: error.message }, status: 0 };
            }
        }

        // 登录获取Token
        async function login() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const captchaCode = document.getElementById('captchaCode').value;

            if (!username || !password) {
                alert('请输入用户名和密码');
                return;
            }

            if (!captchaCode) {
                alert('请输入验证码');
                return;
            }

            if (!captchaId) {
                alert('请先获取验证码');
                return;
            }

            const result = await apiRequest('/api/user/login', 'POST', { 
                username, 
                password, 
                captchaId, 
                captchaCode 
            });
            
            if (result.success && result.data.code === 200) {
                authToken = result.data.data.token;
                document.getElementById('tokenDisplay').style.display = 'block';
                document.getElementById('tokenDisplay').textContent = `Token: ${authToken}`;
                alert('登录成功！Token已保存');
            } else {
                alert(`登录失败: ${result.data.message || '未知错误'}`);
                // 登录失败后刷新验证码
                refreshCaptcha();
            }
        }

        // 公司管理接口
        async function createCompany() {
            const data = {
                name: document.getElementById('companyName').value,
                code: document.getElementById('companyCode').value,
                status: document.getElementById('companyStatus').value
            };
            const result = await apiRequest('/api/companies', 'POST', data);
            showResponse('companyResponse', result.data, !result.success);
        }

        async function getCompanyById() {
            const id = document.getElementById('companyId').value;
            const result = await apiRequest(`/api/companies/${id}`);
            showResponse('companyResponse', result.data, !result.success);
        }

        async function getCompanyByCode() {
            const code = document.getElementById('companyQueryCode').value;
            const result = await apiRequest(`/api/companies/code/${code}`);
            showResponse('companyResponse', result.data, !result.success);
        }

        async function updateCompany() {
            const id = document.getElementById('companyId').value;
            const data = {
                name: document.getElementById('companyName').value,
                code: document.getElementById('companyCode').value,
                status: document.getElementById('companyStatus').value
            };
            const result = await apiRequest(`/api/companies/${id}`, 'PUT', data);
            showResponse('companyResponse', result.data, !result.success);
        }

        async function deleteCompany() {
            const id = document.getElementById('companyId').value;
            const result = await apiRequest(`/api/companies/${id}`, 'DELETE');
            showResponse('companyResponse', result.data, !result.success);
        }

        async function getAllCompanies() {
            const result = await apiRequest('/api/companies/all');
            showResponse('companyResponse', result.data, !result.success);
        }

        // 客户管理接口
        async function createCustomer() {
            const data = {
                name: document.getElementById('customerName').value,
                code: document.getElementById('customerCode').value,
                status: document.getElementById('customerStatus').value
            };
            const result = await apiRequest('/api/customers', 'POST', data);
            showResponse('customerResponse', result.data, !result.success);
        }

        async function getCustomerById() {
            const id = document.getElementById('customerId').value;
            const result = await apiRequest(`/api/customers/${id}`);
            showResponse('customerResponse', result.data, !result.success);
        }

        async function getCustomerByCode() {
            const code = document.getElementById('customerQueryCode').value;
            const result = await apiRequest(`/api/customers/code/${code}`);
            showResponse('customerResponse', result.data, !result.success);
        }

        async function updateCustomer() {
            const id = document.getElementById('customerId').value;
            const data = {
                name: document.getElementById('customerName').value,
                code: document.getElementById('customerCode').value,
                status: document.getElementById('customerStatus').value
            };
            const result = await apiRequest(`/api/customers/${id}`, 'PUT', data);
            showResponse('customerResponse', result.data, !result.success);
        }

        async function deleteCustomer() {
            const id = document.getElementById('customerId').value;
            const result = await apiRequest(`/api/customers/${id}`, 'DELETE');
            showResponse('customerResponse', result.data, !result.success);
        }

        async function getAllCustomers() {
            const result = await apiRequest('/api/customers/all');
            showResponse('customerResponse', result.data, !result.success);
        }

        // 项目管理接口
        async function createProject() {
            const data = {
                projectCode: document.getElementById('projectCode').value,
                projectName: document.getElementById('projectName').value,
                projectBudget: parseFloat(document.getElementById('projectBudget').value),
                estimatedCost: parseFloat(document.getElementById('estimatedCost').value),
                status: document.getElementById('projectStatus').value,
                customerId: parseInt(document.getElementById('customerIdForProject').value)
            };
            const result = await apiRequest('/api/project-basic-infos', 'POST', data);
            showResponse('projectResponse', result.data, !result.success);
        }

        async function getProjectById() {
            const id = document.getElementById('projectId').value;
            const result = await apiRequest(`/api/project-basic-infos/${id}`);
            showResponse('projectResponse', result.data, !result.success);
        }

        async function getProjectByCode() {
            const code = document.getElementById('projectQueryCode').value;
            const result = await apiRequest(`/api/project-basic-infos/code/${code}`);
            showResponse('projectResponse', result.data, !result.success);
        }

        async function updateProject() {
            const id = document.getElementById('projectId').value;
            const data = {
                projectCode: document.getElementById('projectCode').value,
                projectName: document.getElementById('projectName').value,
                projectBudget: parseFloat(document.getElementById('projectBudget').value),
                estimatedCost: parseFloat(document.getElementById('estimatedCost').value),
                status: document.getElementById('projectStatus').value,
                customerId: parseInt(document.getElementById('customerIdForProject').value)
            };
            const result = await apiRequest(`/api/project-basic-infos/${id}`, 'PUT', data);
            showResponse('projectResponse', result.data, !result.success);
        }

        async function deleteProject() {
            const id = document.getElementById('projectId').value;
            const result = await apiRequest(`/api/project-basic-infos/${id}`, 'DELETE');
            showResponse('projectResponse', result.data, !result.success);
        }

        async function getAllProjects() {
            const result = await apiRequest('/api/project-basic-infos/all');
            showResponse('projectResponse', result.data, !result.success);
        }

        // 合同人员管理接口
        async function createContractPersonnel() {
            const data = {
                contractId: parseInt(document.getElementById('contractIdForPersonnel').value),
                name: document.getElementById('personnelName').value
            };
            
            // 只添加非空的字段
            const type = document.getElementById('personnelType').value;
            if (type && type.trim() !== '') {
                data.type = type;
            }
            
            const jobTitle = document.getElementById('jobTitle').value;
            if (jobTitle && jobTitle.trim() !== '') {
                data.jobTitle = jobTitle;
            }
            
            const price = document.getElementById('personnelPrice').value;
            if (price && price.trim() !== '') {
                data.price = parseFloat(price);
            }
            
            const result = await apiRequest('/api/contract-personnel', 'POST', data);
            showResponse('contractPersonnelResponse', result.data, !result.success);
        }

        async function getContractPersonnelById() {
            const id = document.getElementById('contractPersonnelId').value;
            const result = await apiRequest(`/api/contract-personnel/${id}`);
            showResponse('contractPersonnelResponse', result.data, !result.success);
        }

        async function updateContractPersonnel() {
            const id = document.getElementById('contractPersonnelId').value;
            const data = {};
            
            // 只添加非空的字段
            const contractId = document.getElementById('contractIdForPersonnel').value;
            if (contractId && contractId.trim() !== '') {
                data.contractId = parseInt(contractId);
            }
            
            const name = document.getElementById('personnelName').value;
            if (name && name.trim() !== '') {
                data.name = name;
            }
            
            const type = document.getElementById('personnelType').value;
            if (type && type.trim() !== '') {
                data.type = type;
            }
            
            const jobTitle = document.getElementById('jobTitle').value;
            if (jobTitle && jobTitle.trim() !== '') {
                data.jobTitle = jobTitle;
            }
            
            const price = document.getElementById('personnelPrice').value;
            if (price && price.trim() !== '') {
                data.price = parseFloat(price);
            }
            
            const result = await apiRequest(`/api/contract-personnel/${id}`, 'PUT', data);
            showResponse('contractPersonnelResponse', result.data, !result.success);
        }

        async function deleteContractPersonnel() {
            const id = document.getElementById('contractPersonnelId').value;
            const result = await apiRequest(`/api/contract-personnel/${id}`, 'DELETE');
            showResponse('contractPersonnelResponse', result.data, !result.success);
        }

        async function getAllContractPersonnel() {
            const result = await apiRequest('/api/contract-personnel/all');
            showResponse('contractPersonnelResponse', result.data, !result.success);
        }

        // 项目合同管理接口
        async function createProjectContract() {
            const data = {
                projectId: parseInt(document.getElementById('projectIdForContract').value),
                contractNumber: document.getElementById('contractNumber').value,
                contractAmount: parseFloat(document.getElementById('contractAmount').value)
            };
            const result = await apiRequest('/api/project-contracts', 'POST', data);
            showResponse('projectContractResponse', result.data, !result.success);
        }

        async function getProjectContractById() {
            const id = document.getElementById('projectContractId').value;
            const result = await apiRequest(`/api/project-contracts/${id}`);
            showResponse('projectContractResponse', result.data, !result.success);
        }

        async function updateProjectContract() {
            const id = document.getElementById('projectContractId').value;
            const data = {
                projectId: parseInt(document.getElementById('projectIdForContract').value),
                contractNumber: document.getElementById('contractNumber').value,
                contractAmount: parseFloat(document.getElementById('contractAmount').value)
            };
            const result = await apiRequest(`/api/project-contracts/${id}`, 'PUT', data);
            showResponse('projectContractResponse', result.data, !result.success);
        }

        async function deleteProjectContract() {
            const id = document.getElementById('projectContractId').value;
            const result = await apiRequest(`/api/project-contracts/${id}`, 'DELETE');
            showResponse('projectContractResponse', result.data, !result.success);
        }

        async function getAllProjectContracts() {
            const result = await apiRequest('/api/project-contracts/all');
            showResponse('projectContractResponse', result.data, !result.success);
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('API测试页面已加载完成');
            // 自动获取验证码
            refreshCaptcha();
        });
    </script>
</body>
</html>
